import React, { Component } from 'react'
import styles from "./FooterBar.module.scss"
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
import axios from "../../../utils/myaxios"
class FooterBar extends Component {


    goSettle = () => {
        if(this.props.selectFood.length === 0){
            return false;
        }
        this.props.history.push("/foodStore/confirmPayment")
    }

    render() {

        return (
            <div>
                <div className={styles.disBar}>
                    首次光顾减1
                </div>
                <div className={styles.allPrice} >
                    {/* 外卖图标 */}
                    <div 
                        onClick={() => {this.props.showCart(this.props.isShowCart,this.props.selectFood) }}
                        className={styles.priceLeft}>
                        <span className={styles.foodNum}>
                            {this.props.selectFood.reduce((prev, now) => (prev + now.num), 0)}
                        </span>
                        <i>
                            <svg className="icon" aria-hidden="true">
                                <use href="#icon-waimai"></use>
                            </svg>
                        </i>
                    </div>
                    {/* 外卖总价 */}
                    <div className={styles.priceCenter}>
                        {/* 原价 折扣价 */}
                        <div className={styles.centerTop}>
                            <div className={styles.nowPrice}>
                                ￥{(this.props.totalPrice).toFixed(1)}
                            </div>
                            <div className={styles.beforePrice}>
                                ￥{(this.props.totalPrice).toFixed(1)}
                            </div>
                        </div>
                        {/* 配送费 */}
                        <div className={styles.sendPrice}>
                            另需配送费￥0
                        </div>
                    </div>
                    {/* 去结算页面 */}
                    <div onClick={this.goSettle} className={styles.goSettle}>去结算</div>
                </div>
                {/* 点击后出现的购物车 */}
                <div 
                    className={`
                    ${styles.storeCart} 
                    ${this.props.isShowCart ? styles.showCart : ""} 
                    ${this.props.selectFood.length === 0 && this.props.isShowCart ? styles.noShowCart:""}
                `}>
                    <div className={styles.cartTit}>
                        <p>已选商品</p>
                        <span>清空</span>
                    </div>
                    <div className={styles.cartMsg}>
                        {this.props.selectFood.map((v, i) =>
                            <div className={styles.item} key={v.id}>
                                <div className={styles.itemLeft}>{v.name}</div>
                                <div className={styles.itemCenter}>
                                    <span>￥{v.price}</span>
                                    <strong>￥{v.price}</strong>
                                </div>
                                <div className={styles.itemRight}>
                                    <span className={styles.sub} 
                                          onClick={() => { this.props.changeFoodNum(-1,v.id,v.num,this.props.cartID) }}>-</span>
                                    <em>{v.num}</em>
                                    <span className={styles.add} 
                                          onClick={() => { this.props.changeFoodNum(1,v.id,v.num,this.props.cartID) }}>+</span>
                                </div>
                            </div>

                        )}

                    </div>
                </div>

            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        // 初始化cartID
        cartID:state.foodStoreReducer.cartID,
        selectFood: state.foodStoreReducer.beSelectKind.filter(function (v, i) {
            return v.num > 0
        }),
        isShowCart: state.foodStoreReducer.showCart,
        totalPrice: state.foodStoreReducer.beSelectKind.reduce((prev, item) => {
            return (prev + item.price * item.num)
        }, 0)

    }
}

const mapActionToState = (dispatch) => {
    return {
        showCart(bool,foodNum) {
            if(foodNum.length===0){
                return false
            }
            dispatch({
                type: "showCart",
                payload: !bool
            })
        },

        changeFoodNum(step,id,num,cartID) {   
            
            if(step+num===0){
                axios.post("/user/deleteCart",{
                    cartID:cartID.filter((v)=>v.id===id)[0].cartID,
                }).then((res)=>{
                    dispatch({
                        type: "changeFoodNum",
                        step,
                        id
                    })
                    
                }).catch((err)=>{
                    console.log(err);    
                })
            }else{                
                axios.post("/user/modifyCart", {
                    cartID:cartID.filter((v)=>v.id===id)[0].cartID,
                    productnum:step+num
                }).then((res) => {       
                    dispatch({
                        type: "changeFoodNum",
                        step,
                        id
                    })
                }).catch((err) => {
                    console.log(err);
                })
            }
        },
    }
}

export default connect(mapStateToProps, mapActionToState)(withRouter(FooterBar))
